<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 本节很重要 -->
    <div style="width: 100px;height: 100px;background-color: red;"></div>

    <!-- <script>

        document.write('a'); //会在红色方块下面打印a
        // document.write(没什么用，以后也不要用) 在异步加载时会清空文档流
        // 而且：
        // window.onload = function () {

        //      document.write('a');  // 这时即在整个文档全部下载完成之后，也会清空文档流

        // }
    </script> -->
    <script>
        // JS出生（浏览器初始化js功能，js开始发挥作用）的那一刻开始，浏览器按照顺序做的事
        console.log(document.readyState);   // loading


        window.onload = function () {
            console.log(document.readyState);  // complete
        }

        document.onreadystatechange = function () { // 状态码变化的时候触发
            // 注意 事件名全小写，不用小驼峰,规范规定的
            console.log(document.readyState);
        }

        // document.onDOMContentLoaded = function() {
        //     console.log('c');
        // } // 这个事件只能使用 addEventListener

        document.addEventListener('DOMContentLoaded', function () {
            console.log('b');
        }, false); //注意它的发生时间
        // DOMContentLoaded 发生在 load 之前，可以把主函数体写在里面，等到解析完成在执行
    </script>
</body>

</html>